<template>
	<div class="home">
		<Header></Header>
		<Cover title="团队介绍" subtitle="实验室团队介绍" img="weilaikejiduihua.png"></Cover>
        <div v-for="(item,index) in projectList" :key="item.id" class="page-content">
			<div class="lab-title">{{ item.title }}</div>
			<div class="lab-intro" :style="index % 2 == 0 ? 'flex-direction: row-reverse' : ''">
				<div class="lab-intro-info">
					<div class="lab-intro-info__content">
						{{ item.content }}
					</div>
					<el-button type="primary" class="go" round>去看看 <i class="el-icon-arrow-right el-icon-right"></i></el-button>
				</div>
				<img class="lab-intro-img"  :src="item.image" />
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import axios from '../config/http';
export default {
	name: 'Teams',
	components: {
		Cover: () => import('@/components/Cover.vue'),
		Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
	},
    data() {
        return {
            projectList: []
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        async loadData() {
            let res = await axios(`/is/project/list`)
            this.projectList = res.data.data.data
        }
    }
};
</script>

<style lang="less" scoped>
/* 字体大小 font-size */
@fs-base: 16px;
@fs-large: 24px;
@fs-small: 14px;

.page-content {
	.lab-title {
		font-size: @fs-large;
		font-weight: 700;
		margin: 20px 0;
		display: flex;
		justify-content: space-between;
		animation: floatUp 1s ease-in-out;
	}
	.lab-intro {
		font-size: @fs-base;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 50px;
		animation: floatUp 1s ease-in-out;

		&-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 20px;

			&__content {
				font-family: 'Avenir', Helvetica, Arial, sans-serif;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				text-align: justify;
				color: #2c3e50;
				line-height: 1.5;
			}

			.go {
				margin-top: auto;
				margin-left: auto;
			}
		}

		&-img {
			width: 100%;
			height: 500px;
			object-fit: cover;
		}
	}

	@media screen and (max-width: 768px) {
		.lab-intro {
			font-size: @fs-small;
			grid-template-columns: none;
			grid-template-rows: 1fr 1fr;
			gap: 10px 0px;

			&-info {
				gap: 10px;

				&__content {
					text-indent: 2em;
				}

				.go {
					margin-top: 10px;
				}
			}

			&-img {
				height: 200px;
			}
		}
	}
}

@import '@/assets/css/Index.css';
@media screen and (max-width: 768px) {
	#right-text {
		margin-top: 10px;
	}
}
</style>
